<template>
  <div class="body" style="background-color: red height:100%">
    <el-container style="height: 860px">
      <el-aside width="235px" style="background-color: #fff">
        <div
          class="btn"
          @click="info"
          v-bind:class="{ active: this.$route.path === '/myinfo' }"
        >
          个人信息
        </div>
        <div
          class="btn"
          @click="order"
          v-bind:class="{ active: this.$route.path === '/myorder' }"
        >
          我的订单
        </div>
        <div
          class="btn"
          @click="sell"
          v-bind:class="{ active: this.$route.path === '/mysell' }"
        >
          我的售卖
        </div>
        <div
          class="btn"
          @click="publish"
          v-bind:class="{ active: this.$route.path === '/mypublish' }"
        >
          我的发布
        </div>
        <div
          class="btn"
          @click="request"
          v-bind:class="{ active: this.$route.path === '/myrequest' }"
        >
          我的需求
        </div>
        <div
          class="btn"
          @click="collect"
          v-bind:class="{ active: this.$route.path === '/mycollect' }"
        >
          我的收藏
        </div>
        <div
          class="btn"
          @click="message"
          v-bind:class="{ active: this.$route.path === '/mymessage' }"
        >
          我的消息
        </div>
        <div
          class="btn"
          @click="friend"
          v-bind:class="{ active: this.$route.path === '/myfriend' }"
        >
          我的好友
        </div>
      </el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    info() {
      this.$router.push("myinfo");
    },
    order() {
      this.$router.push("myorder");
    },
    sell() {
      this.$router.push("mysell");
    },
    request() {
      this.$router.push("myrequest");
    },
    publish() {
      this.$router.push("mypublish");
    },
    collect() {
      this.$router.push("mycollect");
    },
    message() {
      this.$router.push("mymessage");
    },
    friend() {
      this.$router.push("myfriend");
    },
  },
};
</script>

<style lang='less' scoped>
.body {
  width: 60%;
  margin: 0 auto;
  height: 960px;
}
.btn {
  width: 100%;
  height: 80px;
  text-align: center;
  font-size: 25px;
  line-height: 80px;
  color: #303133;
  user-select: none;
}
.btn:hover {
  background-color: #e4e5e6;
}
/deep/.el-main {
  padding: 0;
}
.btn-in {
  background-color: #e4e5e6;
}
.active {
  background-color: #e4e5e6;
}
/deep/.el-aside {
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}
</style>